<template>
  <div>
    <Appheader :parentToChild="ymname" @c_addrname="parentFn"></Appheader>
    <div class="content" v-loading="loading">
      <div class="choose_top">
        <ul class="classify2 flex">
          <li
            class="maj_li"
            v-for="(maj_list,maj_index) in major"
            :key="maj_index"
            :class="c_maj==maj_list.name?'c1_bg':''"
            @click="choose_maj(maj_list.name,maj_list.id)"
          >{{maj_list.name}}</li>
        </ul>
        <div class="choose_classify">
          <div class="classify1">
            <p>地&nbsp;&nbsp;&nbsp;&nbsp;区:</p>
            <ul>
              <li
                class="addr_li"
                v-for="(addr_list,addr_index) in address"
                :key="addr_index"
                :class="c_addr==addr_list.addname?'bg':''"
                @click="choose_addr(addr_list.addname)"
              >{{addr_list.addname}}</li>
            </ul>
          </div>
          <div class="classify1">
            <p>文化分:</p>
            <ul>
              <li
                class="addr_li"
                v-for="(whf_list,whf_index) in whf"
                :key="whf_index"
                :class="whf_addr==whf_list?'bg':''"
                @click="choose_whf(whf_list)"
              >{{whf_list}}</li>
            </ul>
          </div>
          <!-- <div class="classify1">
            <p>生源地:</p>
            <ul>
              <li
                class="addr_li"
                v-for="(syd_list,syd_index) in address"
                :key="syd_index"
                :class="syd_addr==syd_list.addname?'bg':''"
                @click="choose_syd(syd_list.addname)"
              >{{syd_list.addname}}</li>
            </ul>
          </div>
          <div class="classify1">
            <p>统&nbsp;&nbsp;&nbsp;&nbsp;考:</p>
            <ul>
              <li
                class="addr_li"
                v-for="(tk_list,tk_index) in tk"
                :key="tk_index"
                :class="tk_addr==tk_list?'bg':''"
                @click="choose_tk(tk_list)"
              >{{tk_list}}</li>
            </ul>
          </div>
          <div class="classify1">
            <p>考&nbsp;&nbsp;&nbsp;&nbsp;点:</p>
            <ul>
              <li
                class="addr_li"
                v-for="(kd_list,kd_index) in address"
                :key="kd_index"
                :class="kd_addr==kd_list.addname?'bg':''"
                @click="choose_kd(kd_list.addname)"
              >{{kd_list.addname}}</li>
            </ul>
          </div>-->
        </div>
      </div>
      <div class="choose_main">
        <ul>
          <div class="main_top flex">
            <div class="main_left flex">
              <!-- <p class="line"></p> -->
              高校招生简章
            </div>
            <div class="main_right flex">
              <input type="text" placeholder="请输入学校" v-model="school_name" @keyup.enter="search()" />
              <img src="../../assets/sea_red.png" alt @click="search()" />
            </div>
          </div>
          <li class="main_li flex" v-for="(mainlist,mainindex) in listarry" :key="mainindex">
            <img :src="mainlist.photo" alt />
            <div class="main_li_div">
              <div class="li_div_a flex">
                <p class="a_p1">{{mainlist.name}}</p>
                <!-- <p class="a_p2" v-if="mainlist.zsjz">{{mainlist.zsjz}}</p> -->
              </div>
              <div class="li_div_b hidden3" v-html="mainlist.details.slice(0,260)"></div>
              <!-- <img src="../../assets/zj.png" alt class="li_div_c" @click="see_more(mainlist.id)" /> -->
              <div class="flex" style="justify-content:flex-end;padding-right:30px;margin-top:20px;">
                <div class="li_div_c_sec" @click="see_more(mainlist.id)">查看更多</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="page" v-if="total!=0">
        <div class="page_a" @click="handleCurrentChange(1)">首页</div>
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          layout="prev, pager, next"
          :total="total"
          :page-size="5"
        ></el-pagination>
        <div class="page_a" @click="handleCurrentChange('w')">尾页</div>
      </div>
      <div v-else class="tip2">
        <img src="../../assets/none.png" alt />
      </div>
    </div>
    <Appfooter></Appfooter>
  </div>
</template>

<script>
import Appheader from "../header";
import Appfooter from "../footer";
import address from "../../../static/address";
import { ykSchoollist, formationTypelist } from "../../api/index";
export default {
  props: {},
  data() {
    return {
      ymname: "高校招生简章",
      address: address,
      major: [
        {
          id: "",
          name: "筛选条件"
        }
      ],
      whf: ["全部", "300以下", "300-400", "400-500", "500以上"],
      tk: ["全部", "承认统考成绩"],
      c_addr: "全国",
      c_maj: "全部",
      c_maj_id: "",
      zixunType: {
        id: "",
        name: "全部"
      },
      syd_addr: "全国",
      kd_addr: "全国",
      tk_addr: "全部",
      whf_addr: "全部",
      whf_addr1: "",
      whf_addr2: "",
      loading: true,
      currentPage: 1,
      total: 0, //列表总数
      pagenum: 1, //请求的页数
      pagesize: 5, //请求的数量
      listarry: [], //请求的数据
      school_name: ""
    };
  },
  computed: {},
  created() {},
  mounted() {
    // formationTypelist()
    //   .then(res => {
    //     if (res.data.code == 0) {
    //       res.data.rows.unshift(this.zixunType);
    //       this.major = res.data.rows;
    //     }
    //   })
    //   .catch(e => {});
    this.post();
  },
  watch: {},
  methods: {
    post() {
      let tk_addr, c_addr, syd_addr, kd_addr;
      if (this.tk_addr == "全部") {
        tk_addr = "";
      } else if (this.tk_addr == "承认统考成绩") {
        tk_addr = "1";
      }
      if (this.c_addr == "全国") {
        c_addr = "";
      } else {
        c_addr = this.c_addr;
      }
      if (this.syd_addr == "全国") {
        syd_addr = "";
      } else {
        syd_addr = this.syd_addr;
      }
      if (this.kd_addr == "全国") {
        kd_addr = "";
      } else {
        kd_addr = this.kd_addr;
      }
      let msg = {
        zixuntype: this.c_maj_id,
        region: c_addr, //地区
        points1: this.whf_addr1, //最小分数
        points2: this.whf_addr2, //最大分数
        students: syd_addr, //生源
        exam: tk_addr, //统考成绩（0是 1否）
        examination: kd_addr, //考点
        name: this.school_name, //学校搜索
        pageNum: this.pagenum,
        pageSize: this.pagesize
      };
      ykSchoollist(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            this.listarry = res.data.rows;
            this.total = res.data.total;
            this.school_name = "";
          }
        })
        .catch(e => {});
      this.loading = false;
    },
    //地区
    choose_addr(item) {
      this.c_addr = item;
      this.pagenum = 1;
      (this.currentPage = 1), this.post();
    },
    //文化分
    choose_whf(item) {
      this.whf_addr = item;
      this.pagenum = 1;
      if (item.indexOf("以下") != -1) {
        this.whf_addr1 = "";
        this.whf_addr2 = item.replace(/[^0-9]/gi, "");
      } else if (item.indexOf("以上") != -1) {
        this.whf_addr1 = item.replace(/[^0-9]/gi, "");
        this.whf_addr2 = "";
      } else if (item.indexOf("全部") != -1) {
        this.whf_addr1 = "";
        this.whf_addr2 = "";
      } else {
        this.whf_addr1 = item.split("-")[0];
        this.whf_addr2 = item.split("-")[1];
      }
      (this.currentPage = 1), this.post();
    },
    //生源地
    choose_syd(item) {
      this.syd_addr = item;
      (this.currentPage = 1), (this.pagenum = 1);
      this.post();
    },
    //统考
    choose_tk(item) {
      this.tk_addr = item;
      this.pagenum = 1;
      (this.currentPage = 1), this.post();
    },
    //考点
    choose_kd(item) {
      this.kd_addr = item;
      (this.currentPage = 1), (this.pagenum = 1);
      this.post();
    },
    choose_maj(item, id) {
      this.c_maj = item;
      this.c_maj_id = id;
      this.post();
    },
    handleCurrentChange(val) {
      if (val == "w") {
        this.pagenum = Math.ceil(this.total / this.pagesize);
      } else {
        this.pagenum = val;
      }
      this.currentPage = this.pagenum;
      this.loading = true;
      this.post();
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    //查看更多
    see_more(list_id) {
      this.$router.push({
        name: "gaoxiaoDetail",
        params: {
          id: list_id
        }
      });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    parentFn(data) {
      this.choose_addr(data);
    },
    //搜索
    search() {
      this.pagenum = 1;
      (this.currentPage = 1), this.post();
    }
  },
  components: { Appheader, Appfooter }
};
</script>

<style scoped>
.content {
  width: 1200px;
  margin: 0 auto;
}
/* choose_classify */
.choose_classify {
  border-radius: 10px;
  padding: 18px 72px 11px 36px;
}
.choose_classify > div {
  display: flex;
}
.choose_classify > div > p {
  margin-top: 2px;
}
.choose_classify > div > p,
.choose_classify li {
  font-size: 14px;
  color: #c8a94f;
}
.choose_classify > div > ul {
  flex-wrap: wrap;
  display: flex;
  width: 1045px;
}
.choose_classify li {
  cursor: pointer;
  height: 24px;
  color: #a9abb7;
  border-radius: 12px;
  text-align: center;
  line-height: 24px;
  margin-left: 13px;
  margin-bottom: 7px;
  padding: 0 10px;
}
.bg {
  border:1px solid #c8a94f;
  color: #c8a94f;
}
.choose_top{
  background: #363640;
  border-radius: 20px;
}
.classify2 {
  margin-top: 40px;
}
.maj_li {
  padding: 15px 36px;
  font-size: 22px;
  color: #c8a94f;
  cursor: pointer;
}
.c1_bg {
  border-bottom: 4px solid #c8a94f !important;
  color: #c8a94f !important;
}
/* page */
.page {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 75px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.page >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #c8a94f !important;
}
.page >>> .el-pager li,
.page >>> .btn-next,
.page >>> .btn-prev {
  width: 34px;
  height: 34px;
  padding: 0;
  line-height: 34px;
  text-align: center;
  border-radius: 5px;
}
.page_a {
  width: 34px;
  height: 34px;
  background: rgba(243, 243, 243, 1);
  border-radius: 5px;
  font-size: 12px;
  color: #333;
  line-height: 34px;
  text-align: center;
}
.page_a:hover {
  background: #c8a94f;
  color: #fff;
}
.choose_main{
  background: #363640;
  border-radius: 20px;
}
/* main_top */
.main_top {
  justify-content: space-between;
  margin-top: 27px;
  padding:15px 36px;
}
.main_left {
  font-size: 24px;
  color: #c8a94f;
}
.main_left > .line {
  width: 4px;
  height: 23px;
  background: rgba(216, 20, 23, 1);
  margin-left: 30px;
  margin-right: 6px;
}
.main_right {
  width: 319px;
  height: 32px;
  border: 1px solid #a9abb7;
  border-radius: 16px;
  padding-left: 14px;
  padding-right: 5px;
}
.main_right input {
  border: 0;
  background: none;
  width: 290px;
  color: #a9abb7;
  font-size: 14px;
}
input::placeholder {
  color: #dfdede;
  font-size: 14px;
}
.main_right img {
  width: 18px;
  height: 20px;
  margin-left: 5px;
}
.main_li {
  width: 1173px;
  padding-top: 39px;
  padding-right: 61px;
  /* border-bottom: 1px solid #90929f; */
  margin-left: 25px;
  padding-bottom: 46px;
  box-sizing: border-box;
}
.main_li > img {
  width: 151px;
  height: 151px;
  margin-right: 29px;
  border:5px solid #fff;
  border-radius: 50%;
}
.li_div_a {
  justify-content: space-between;
  padding-right: 277px;
}
.a_p1 {
  font-size: 24px;
  font-weight: 500;
  color: #fff;
}
.a_p2 {
  width: 96px;
  height: 28px;
  background: rgba(255, 0, 0, 1);
  border-radius: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 1);
  line-height: 28px;
  text-align: center;
  cursor: pointer;
}
.li_div_b {
  width: 931px;
  font-size: 14px;
  color: #90929f;
  line-height: 27px;
  margin-top: 7px;
}
.li_div_c {
  cursor: pointer;
}
.li_div_c_sec {
  width: 99px;
  height: 30px;
  border: 1px solid #90929f;
  font-size: 14px;
  color: #90929f;
  line-height: 30px;
  border-radius: 30px;
  text-align: center;
  margin: 15px 0;
  cursor: pointer;
}
.li_div_c_sec:hover {
  color: #c8a94f;
  border: 1px solid #c8a94f;
}
</style>
